'use strict';
import React, {Component, PropTypes} from 'react';
import ItemTopBox from './ItemTopBox.jsx';
import ItemBotBox from './ItemBotBox.jsx';
import Pannel from './Pannel.jsx';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

import './style.less';

class ComponentBox extends Component {
    constructor( props ) {
        super( props );
        this.state = this.props.data.state;
        //debugger;
    }
    componentDidMount() {

    }
    componentDidUpdate(){

    }
    render() {
        this.clientWidth = this.props.deviceWidth;
        this.gapRight = 5;
        this.multi = 1.5;
        this.gapBottom = 10;
        this.topItemHeight = this.topItemWidth = (this.clientWidth - this.gapRight) / 3;
        this.botItemWidth = this.topItemWidth;
        this.botItemHeight = this.topItemWidth / this.multi;
        let { diyRows, showTopPannel, showBotPannel,multiple } = this.props.data.state;
        return(
            <div className="diy_box">
                <div className="diy_row hed">
                    {
                        diyRows.slice(0,3).map((row,i) => {
                            return (
                                <ItemTopBox
                                    key={i}
                                    showTopPannel={this.state.showTopPannel}
                                    onSelectItem={this.onSelectItem.bind(this, i)}
                                    row={row}
                                    editMode={this.props.editMode}
                                    width={this.topItemWidth}
                                    height={this.topItemHeight}
                                    index={i}
                                    selectIndex={this.state.selectIndex}
                                />
                            )
                        })
                    }

                </div>
                {this.renderPannel(0)}
                <div className="diy_row bot">
                    {
                        diyRows.slice(3).map((row,i) => {
                            return (
                                <ItemBotBox
                                    key={i}
                                    showBotPannel={this.state.showBotPannel}
                                    editMode={this.props.editMode}
                                    onSelectItem={this.onSelectItem.bind(this,i + 3 )}
                                    width={this.botItemWidth}
                                    height={this.botItemHeight}
                                    index={i + 3}
                                    row={row}
                                    selectIndex={this.state.selectIndex}
                                />
                            )
                        })
                    }
                </div>
                {this.renderPannel(1)}
            </div>
        )
    }
    renderPannel(flag){
        if(flag === 0 && !this.state.showTopPannel )
            return null;
        if(flag === 1 && !this.state.showBotPannel )
            return null
        let className = 'p_' + this.state.selectIndex % 3;

        let rows = this.props.data.state.diyRows[this.state.selectIndex];
        let minItemWidth = this.state.minItemWidth;
        //console.log(rows);
        let midW = this.clientWidth/2;
        let width = midW - 30
        if(width < minItemWidth) width = minItemWidth;

        let style = {
            display: "block",
            //height: rows.items.length > 2 ? 267 : 141,
            position: "relative",
            overflow:"hidden"
        };
        let type = rows.type ? rows.type : 2;

        let zoneStyle = {};
        if(this.props.deviceWidth < 375){
            zoneStyle.zoom = "0.9";
        }
        if(this.props.deviceWidth < 336){
            zoneStyle.zoom = "0.8";
        }
        return (
                <div className={'pannel ' + className}>
                    <div className="inner">
                        <table className="groups" style={zoneStyle}>
                            <tbody>
                            <tr>
                                {
                                    rows.items.slice(0,2).map((row,i)=>{
                                        return (
                                            <Pannel
                                                key={i}
                                                onSelectProductItem={::this.onSelectProductItem}
                                                deviceWidth={this.props.deviceWidth}
                                                width={width}
                                                row={row}/>
                                        )
                                    })
                                }
                            </tr>

                            {
                                type == 4 ?
                                    <tr>
                                        {
                                            rows.items.slice(2).map((row,i)=>{
                                                return (
                                                    <Pannel
                                                        key={i}
                                                        onSelectProductItem={::this.onSelectProductItem}
                                                        deviceWidth={this.props.deviceWidth}
                                                        width={width}
                                                        row={row}/>
                                                )
                                            })
                                        }
                                    </tr>:null

                            }


                            </tbody>
                        </table>

                    </div>
                </div>
        )
    }
    onSelectProductItem(productId){
        if(productId){
            //alert(productId);
            if(typeof Tida !== "undefined"){
                Tida.detail(productId);
            }
        }

    }
    onSelectItem(i){
        if(i < 3){
            this.setState({
                showTopPannel:(i != this.state.selectIndex) ? true :!this.state.showTopPannel,
                showBotPannel:false,
                selectIndex:i
            });
        }else{
            this.setState({
                showTopPannel:false,
                showBotPannel:(i != this.state.selectIndex) ? true :!this.state.showBotPannel,
                selectIndex:i
            });
        }
        if(this.props.editMode && this.props.editDiyBtn){
            this.props.editDiyBtn(i)
        }
    }
}

ComponentBox.propTypes = {
    data:PropTypes.object.isRequired
};
export default ComponentBox;